<template>
  <div>
    <el-table :data="list" :loading="loading" class="mt20">
      <el-table-column label="操作时间" prop="date">
        <template #default="{ row }">{{ parseTime(row.serverDate) }}</template>
      </el-table-column>
      <el-table-column label="开门方式" prop="description"></el-table-column>
      <el-table-column label="操作人" prop="username"></el-table-column>
      <el-table-column label="状态" prop="success" width="100px">
        <template #default="{ row }">
          <span>{{ row.success === 1 ? '成功' : '失败' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>      
</template>
<script setup name="KeyPane">
import { useRouter } from 'vue-router'
import LockApi from "@/api/device/lock.js";

const { proxy } = getCurrentInstance()
const router = useRouter()

const loading = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const list = ref([])
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
})
const { queryParams } = toRefs(data)

const props = defineProps({
  lockId: String
})

function getList() {
  if (!props.lockId) {
    return
  }
  
  loading.value = true
  const params = {
    ...queryParams.value,
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }
  LockApi.getRecordList(props.lockId, params).then(res => {
    if (res.code === 200) {
      list.value = res.rows
      total.value = res.total
    }
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}

function handleSizeChange(val) {
  pageSize.value = val
  getList()
}

function handleCurrentChange(val) {
  pageNum.value = val
  getList()
}

function handleSearch(params) {
  pageNum.value = 1
  queryParams.value = {
    ...queryParams.value,
    ...params
  }
  getList()
}

getList()
</script>